前端程式設計筆記彙整 (完整版)

第十章：Bootstrap 表單與互動元件樣式

本章節彙整了 Bootstrap 常用的表單輸入元件（Forms）。透過套用特定的 Class，可以快速統一各個瀏覽器的輸入框外觀，並提供良好的使用者驗證回饋（Validation）。

1. 基礎文字輸入框與驗證回饋

文字輸入框 <input type="text">、密碼框與 Email 框是最基本的表單元素。

核心類別： 必須加上 form-control 類別，讓輸入框具備 Bootstrap 的標準外觀與 Focus 發光效果。
表單標籤： 使用 <label class="form-label"> 來標示該欄位的用途。
驗證回饋 (Validation)： 搭配 JavaScript 判斷後，可動態顯示 valid-feedback (綠字，表示正確) 或 invalid-feedback (紅字，表示錯誤)。

                    💡 觀念釐清：是否一定要包在 <form> 標籤內？

                    傳統上表單送出會導致網頁重新整理，因此需要 <form> 與
                    <button type="submit">。但在現代前端開發中，若使用 AJAX (如 jQuery 的 $.ajax 或 Axios)
                    來傳遞資料，通常不需要包在 <form> 中，直接抓取 input 的值並綁定一般按鈕
                    <button type="button"> 的點擊事件即可。
                

2. 下拉選單 (Select) 與資料建議清單 (Datalist)

用於讓使用者從預設的選項中挑選資料。

A. 傳統下拉選單 (Select)

外觀類別： 使用 form-select。可加上 form-select-lg 放大選單尺寸。
防呆預設值： 為了避免使用者送出預設的提示文字，第一筆提示選項（如：***請選擇縣市***）通常會加上 disabled selected，讓它顯示但無法被選取作為有效值。

B. 推薦輸入清單 (Datalist)

結合了「文字輸入框」與「下拉選單」的優點，允許使用者自由打字，同時提供熱門選項供點選。

<input type="text" class="form-control" list="foodlist">
<datalist id="foodlist">
    <option value="牛肉麵"></option>
    <option value="炒飯"></option>
</datalist>

注意： input 的 list 屬性名稱，必須與 datalist 的 id 完全一致才能產生關聯。

3. 單選框 (Radio) 與複選框 (Checkbox)

將預設的圓形或方形選取框美化，確保在跨裝置上的視覺一致性。

外層容器： 每一組選項必須包在 <div class="form-check"> 內。
選項本身： 加上 form-check-input 類別。
選項文字： 加上 form-check-label 類別。

                    💡 Radio 單選的關鍵：

                    要讓多個單選框產生「互斥」效果（選了 A 就會取消 B），這些 input 必須具備相同的 name
                    屬性（例如：name="edu"）。
                

4. 範圍滑桿 (Range)

適用於讓使用者拖曳選擇數值（如音量、數量）。

核心類別： 使用 <input type="range" class="form-range">。
控制參數： min (最小值)、max (最大值)、step (每次拖曳跳動的級距)。
前端互動： 實務上常搭配 JavaScript 監聽 input 或 change 事件，將滑桿當下的數值即時顯示在畫面上的 <span> 標籤中。

5. 漂浮標籤 (Floating Labels)

將標籤 (Label) 整合進輸入框內部，當使用者點擊輸入時，標籤會優雅地縮小並浮動至上方，大幅節省版面空間且具現代感。

<div class="mb-3 form-floating">
    <input type="text" class="form-control" id="floatingInput" placeholder="這欄不能省略">
    <label for="floatingInput">帳號</label>
</div>

結構順序： 在 .form-floating 容器中，<input> 必須寫在 <label> 前面，CSS 才能順利抓到選取狀態並觸發漂浮動畫。
必要屬性： 即使漂浮表單不顯示 placeholder 內容，<input> 標籤內依然必須加上 placeholder 屬性，否則無法正常運作。